<template>
  <div class="pointer-events-none relative h-full w-full" ref="infoRef">
    <!-- 滚动公告 -->
    <Carousel
      class="vertical-scoll"
      ref="carouselRef"
      dot-position="left"
      v-if="noticeList.length > 0 && expandNotice"
      :dots="false"
    >
      <div
        class="notice-box relative flex h-fit w-full leading-[36px]"
        v-for="item in noticeList"
        :key="item.id"
      >
        <div class="mr-2 flex h-[36px] items-center">
          <img src="/static/screen/notice-icon.png" class="h-[18px] w-[18px]" />
        </div>
        <span class="notice-title w-fit">近期国内地震预警信息</span>
        <div class="flex-1 truncate">
          <Tooltip :getPopupContainer="() => infoRef">
            <template #title>{{ item.info }}</template>
            {{ item.info }}</Tooltip
          >
        </div>
        <div
          class="flex cursor-pointer items-center"
          @click="() => (expandNotice = !expandNotice)"
        >
          <img
            src="/static/screen/close-notice.png"
            class="h-[28px] w-[14px]"
          />
        </div>
      </div>
    </Carousel>
    <!-- 收缩展开公告 -->
    <div
      class="not-notice pointer-events-auto flex cursor-pointer items-center justify-center"
      v-else
      @click="() => (expandNotice = !expandNotice)"
    >
      <img src="/static/screen/notice.png" class="h-[18px] w-[18px]" />
      <img
        src="/static/screen/notice-tips.png"
        class="notice-tips h-[8px] w-[8px]"
      />
    </div>

    <!-- 台站波形数据弹窗 -->
    <WaveChart
      class="wave-box h-full w-full"
      v-if="showWave"
      :stationId="stationId"
      :style="waveStyle"
    ></WaveChart>

    <!-- 底部监测阵，台站图例 -->
    <div
      class="w-50 bg-linear-to-r absolute right-1 top-10 flex h-10 items-center from-[#000E1DFF] from-0% to-[#021C36FF] to-100%"
    >
      <div class="flex flex-1 items-center justify-center">
        <div class="mr-2 h-3 w-3 bg-[#37DEFFFF]"></div>
        <div class="text-sm">监测阵</div>
      </div>
      <div class="flex flex-1 items-center justify-center">
        <div class="mr-2 h-3 w-3 bg-[#0EF1D3FF]"></div>
        <div class="text-sm">台站</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { CSSProperties, computed, onMounted, ref, shallowRef } from 'vue';
import { recentEarthquakeInfo } from '@/pages/screen/api';
import { useOl } from '@/pages/screen/components/olMap/index.vue';
import { Carousel, Tooltip } from 'ant-design-vue';
import dayjs from 'dayjs';
import WaveChart from '../../wave-chart/index.vue';

const infoRef = shallowRef();

// 滚动公号数据
const noticeList = ref([]);
const expandNotice = ref(true);

const init = async () => {
  const noticeRes = await recentEarthquakeInfo();
  noticeList.value = noticeRes.data.map((item, index) => {
    item.id = index;
    const time = dayjs(item.oritime).format('YYYY年M月D日 H时m分');
    item.info = `据中国地震台网测定，北京时间${time}在${item.locname}(北纬${item.lon}度，东经${item.lon}度)，发生${item.magnitude}级地震，震源深度${item.depth}千米。`;
    return item;
  });
};

const waveStyle = computed<CSSProperties>(() => {
  return {
    position: 'absolute',
    width: '80%',
    height: '50%',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };
});

// 波形数据展示
const showWave = ref(false);
const stationInfo = ref<any>({});
const stationId = ref<string>('');
useOl({
  onClick(res) {
    // 点击台站
    if (res.data?.networkCode && res.data?.stationCode) {
      showWave.value = true;
      stationId.value = res.data?.networkCode + '.' + res.data?.stationCode;
      stationInfo.value = res.data;
      // 点击地图任意点关闭波形数据弹窗
    } else {
      showWave.value = false;
    }
  },
});

onMounted(async () => {
  await init();
});
</script>

<style lang="scss" scoped>
.detail-btn {
  .ant-btn {
    background: url('/static/screen/detail-btn-bg.png');
  }
}

.vertical-scoll {
  padding: 0 2px 0 12px;
  overflow: hidden;
  width: 100%;
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #000e1d 0%, #083665 100%);
  box-shadow: inset 0px 0px 24px 0px rgba(49, 108, 169, 0.5);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(49, 108, 169, 0.5);

  .notice-box {
    display: flex !important;
    position: relative;
    .notice-title {
      margin: 0 26px 0 0;
      &::after {
        content: '';
        position: absolute;
        top: 11px;
        left: 180px;
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
.not-notice {
  width: 36px;
  height: 36px;
  background: linear-gradient(180deg, #000e1d 0%, #083665 100%);
  border: 1px solid #2e6ba8;
  position: relative;

  .notice-tips {
    position: absolute;
    top: 3px;
    right: 5px;
  }
}

:deep(.slick-slider) {
  width: 100%;
}
</style>
